<!DOCTYPE html>
<html class="x-admin-sm">

    <head>
        <meta charset="UTF-8">
        <title>menu</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
        <link rel="stylesheet" href="{*cdn*}css/font.css">
        <link rel="stylesheet" href="{*cdn*}css/xadmin.css">
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
        <script src="{*cdn*}lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="{*cdn*}js/xadmin.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
        <div class="layui-card">
            <div class="layui-card-header">
              <button class="layui-btn" name="button" onclick="window.location.reload()"><i class="iconfont">&#59050;</i> {*locale['dashboard.menu.menu_manage.table.options.reflush']*}</button>
              <button class="layui-btn" name="button" onclick="xadmin.open('{*locale['dashboard.menu.menu_manage.table.options.add']*}', '{*menu_add_url*}', 500, 280)"><i class="iconfont">&#xe6b9;</i> {*locale['dashboard.menu.menu_manage.table.options.add']*}</button>
            </div>
            <div class="layui-card-body">
                <table class="layui-table layui-form">
                  <thead>
                    <tr>
                      <th width="10">{*locale['dashboard.menu.menu_manage.table.id']*}</th>
                      <th width="30">{*locale['dashboard.menu.menu_manage.table.icon']*}</th>
                      <th width="150">{*locale['dashboard.menu.menu_manage.table.name']*}</th>
                      <th width="200">{*locale['dashboard.menu.menu_manage.table.url']*}</th>
                      <th width="180">{*locale['dashboard.menu.menu_manage.table.options']*}</th>
                  </thead>
                  <tbody class='x-cate'>
                  {% if menus and type(menus) == 'table' then%}
                    {% for index, menu in ipairs(menus) do %}
                    <tr cate-id='{*menu.id*}' fid='0'>
                      <td>{*menu.id*}</td>
                      <td><i class="layui-icon">{*menu.icon*}</i></td>
                      <td>
                        {% if type(menu.list) == 'table' then %}
                          <i class="layui-icon x-show" status='true'>&#xe623;</i>
                        {% end %}{{locale[menu.name] or menu.name}}
                      </td>
                      <td>{{ menu.url or '-' }}</td>
                      <td class="td-manage">
                        <button class="layui-btn layui-btn-xs"  onclick="xadmin.open('{*locale['dashboard.menu.menu_manage.table.options.add']*}', '{*menu_add_url*}?id={*menu.id*}', 500, 280)" ><i class="iconfont">&#xe6b9;</i>{*locale['dashboard.menu.menu_manage.table.options.add']*}</button>
                        <button class="layui-btn layui-btn-warm layui-btn-xs"  onclick="xadmin.open('{*locale['dashboard.menu.menu_manage.table.options.edit']*}','{*menu_edit_url*}?id={*menu.id*}', 500, 280)"><i class="layui-icon">&#xe642;</i>{*locale['dashboard.menu.menu_manage.table.options.edit']*}</button>
                        <button class="layui-btn layui-btn-danger layui-btn-xs"  onclick="member_del(this, {action: 'delete', token: '{*token*}', id:{*menu.id*}})" ><i class="layui-icon">&#xe640;</i>{*locale['dashboard.menu.menu_manage.table.options.delete']*}</button>
                      </td>
                    </tr>
                    {% if type(menu.list) == 'table' then%}
                      {% for index, sub in ipairs(menu.list) do%}
                      <tr cate-id='{*sub.id*}' fid='{*menu.id*}'>
                        <td>{*sub.id*}</td>
                        <td><i class="layui-icon">{*sub.icon*}</i></td>
                        <td>
                          |------->
                          {% if type(sub.list) == 'table' then %}
                            <i class="layui-icon x-show" status='true'>&#xe623;</i>
                          {% end %}
                          {{locale[sub.name] or sub.name}}
                        </td>
                        <td>{{ sub.url or '-' }}</td>
                        <td class="td-manage">
                          <button class="layui-btn layui-btn-xs"  onclick="xadmin.open('{*locale['dashboard.menu.menu_manage.table.options.add']*}', '{*menu_add_url*}?id={*sub.id*}', 500, 280)" ><i class="iconfont">&#xe6b9;</i>{*locale['dashboard.menu.menu_manage.table.options.add']*}</button>
                          <button class="layui-btn layui-btn-warm layui-btn-xs"  onclick="xadmin.open('{*locale['dashboard.menu.menu_manage.table.options.edit']*}','{*menu_edit_url*}?id={*sub.id*}', 500, 280)"><i class="layui-icon">&#xe642;</i>{*locale['dashboard.menu.menu_manage.table.options.edit']*}</button>
                          <button class="layui-btn layui-btn-danger layui-btn-xs"  onclick="member_del(this, {action: 'delete', token: '{*token*}', id:{*sub.id*}})" ><i class="layui-icon">&#xe640;</i>{*locale['dashboard.menu.menu_manage.table.options.delete']*}</button>
                        </td>
                        </tr>
                        {% if type(sub.list) == 'table' then %}
                          {% for index, it in ipairs(sub.list) do %}
                          <tr cate-id='{*it.id*}' fid='{*sub.id*}'>
                            <td>{*it.id*}</td>
                            <td><i class="layui-icon">{*it.icon*}</i></td>
                            <td>
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              |-------> {{locale[it.name] or it.name}}
                            </td>
                            <td>{*it.url*}</td>
                            <td class="td-manage">
                              <button class="layui-btn layui-btn-warm layui-btn-xs"  onclick="xadmin.open('{*locale['dashboard.menu.menu_manage.table.options.edit']*}','{*menu_edit_url*}?id={*it.id*}', 500, 280)"><i class="layui-icon">&#xe642;</i>{*locale['dashboard.menu.menu_manage.table.options.edit']*}</button>
                              <button class="layui-btn layui-btn-danger layui-btn-xs"  onclick="member_del(this, {action: 'delete', token: '{*token*}', id:{*it.id*}})" ><i class="layui-icon">&#xe640;</i>{*locale['dashboard.menu.menu_manage.table.options.delete']*}</button>
                            </td>
                            </tr>
                          {% end %}
                        {% end%}
                      {% end %}
                    {% end %}
                    {% end %}
                  {% end %}
                  </tbody>
                </table>
              </div>
            </div>
        </div>
        <script>
          layui.use(['form'], function(){
            form = layui.form;

          });

           /*用户-删除*/
          function member_del(obj, field){
              layer.confirm("", {title:"", content:"{*locale['dashboard.menu.menu_manage.table.options.confirm']*}"}, function(index){
                  $.ajax({
                    url: "{*api_url*}", type: "POST", headers: {token:"{*token*}"}, data: field,
                    error: function (res) {
                      return layer.msg('请求失败', {time:2000});
                    },
                    success: function (res) {
                      if (res.code != 0) {
                        return layer.msg(res.msg, {time:2000});
                      }
                      return layer.msg(res.msg, {time:1000}, function () {
                        return window.location.reload();
                      });
                    },
                  })
              });
          }

          // 分类展开收起的分类的逻辑
          //
          $(function(){
            $("tbody.x-cate tr[fid!='0']").hide();
            // 栏目多级显示效果
            $('.x-show').click(function () {
                if($(this).attr('status')=='true'){
                    $(this).html('&#xe625;');
                    $(this).attr('status','false');
                    cateId = $(this).parents('tr').attr('cate-id');
                    $("tbody tr[fid="+cateId+"]").show();
               }else{
                    cateIds = [];
                    $(this).html('&#xe623;');
                    $(this).attr('status','true');
                    cateId = $(this).parents('tr').attr('cate-id');
                    getCateId(cateId);
                    for (var i in cateIds) {
                        $("tbody tr[cate-id="+cateIds[i]+"]").hide().find('.x-show').html('&#xe623;').attr('status','true');
                    }
               }
            })
          })

          var cateIds = [];
          function getCateId(cateId) {
              $("tbody tr[fid="+cateId+"]").each(function(index, el) {
                  id = $(el).attr('cate-id');
                  cateIds.push(id);
                  getCateId(id);
              });
          }

        </script>
    </body>
</html>
